<template>
  <div class="member">
    <div class="wrapper">
      <!-- 头部 star  -->
      <div class="header">
        <div class="header_left">
          <router-link tag="a" :to="hop"
            ><img :src="require('../assets/img/iv_back_white.png')" alt=""
          /></router-link>
        </div>
        <div class="header_center">会员中心</div>
        <div class="header_right"></div>
      </div>
      <!-- 头部 end   -->

      <div class="portrait">
        <div class="head_portrait">
          <img :src="require('../assets/img/iv_wode_ren.png')" alt="" v-if="!vip" />
          <img :src="require('../assets/img/iv_wode_ren_vip.png')" alt="" v-if="vip" />
          <div class="vip2">
            <img :src="require('../assets/img/ic_mine_vip2.png')" alt="" v-if="!vip" />
            <img :src="require('../assets/img/ic_mine_vip2_liang.png')" alt="" v-if="vip" />
          </div>
        </div>
        <div class="user">
          <p class="username">{{token}}</p>
          <p class="openvip" v-if="!vip">立即开通会员</p>
          <p class="openvip" v-if="vip">你已经是会员啦</p>
        </div>
      </div>

      <div class="imgs">
        <img :src="require('../assets/img/iv_vip_icon_banner.png')" alt="" />
      </div>

      <div class="money">
        <ul>
          <li
            v-for="item in list"
            :key="item.type"
            :class="{ con: selectType == item.type }"
            @click="buy(item.type)"
          >
            <p>{{ item.key }}</p>
            <p>{{ item.yang }}</p>
            <div class="hot" v-if="item.type == 1"></div>
          </li>
        </ul>
      </div>

      <div class="payment">
        <van-radio-group v-model="radio">
          <van-cell-group>
            <div class="zfb">
              <img :src="require('../assets/img/ic_zfb_big.webp')" alt="" />
              <van-cell title="支付宝 （优选）" clickable @click="radio = '1'">
                <template #right-icon>
                  <van-radio name="1" />
                </template>
              </van-cell>
            </div>
            <div class="zfb">
              <img :src="require('../assets/img/ic_wx_pay.webp')" alt="" />
              <van-cell title="微信" clickable @click="radio = '2'">
                <template #right-icon>
                  <van-radio name="2" />
                </template>
              </van-cell>
            </div>
          </van-cell-group>
        </van-radio-group>
      </div>

      <div class="open" @click="openvip">
        <p>立即开通</p>
      </div>

      <div class="logo">
        <div class="logo_left">
          <img :src="require('../assets/img/iv_vip_line1.png')" alt="" />
        </div>
        <div class="logo_center">会员特权</div>
        <div class="logo_right">
          <img :src="require('../assets/img/iv_vip_line2.png')" alt="" />
        </div>
      </div>

      <div class="privilege">
        <ul>
          <li>
            <div class="img">
              <img :src="require('../assets/img/iv_vip_icon1.png')" alt="" />
            </div>
            <p>专属免费</p>
          </li>
          <li>
            <div class="img">
              <img :src="require('../assets/img/iv_vip_icon2.png')" alt="" />
            </div>
            <p>抢先收听</p>
          </li>
          <li>
            <div class="img">
              <img :src="require('../assets/img/iv_vip_icon3.png')" alt="" />
            </div>
            <p>高清音质</p>
          </li>
          <li>
            <div class="img">
              <img :src="require('../assets/img/iv_vip_icon4.png')" alt="" />
            </div>
            <p>尊贵标识</p>
          </li>
        </ul>
      </div>

      <van-loading type="spinner" color="#000" v-show="loading" />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          type: 1,
          key: "一年会员",
          yang: "￥88.00",
        },
        {
          type: 2,
          key: "六个月会员",
          yang: "￥58.00",
        },
        {
          type: 3,
          key: "三个月会员",
          yang: "￥38.00",
        },
      ],
      flagone: true,
      selectType: 1,
      radio: "1",
      token:null,
      loading:false,
      vip:false || window.localStorage.getItem("vip"),
      hop:null,
    };
  },
  methods: {
    buy(type) {
      this.selectType = type;
      console.log(this.hop);
    },
    openvip(){
        this.loading=true
        setTimeout(()=>{
            this.loading=false
            this.vip=true
             window.localStorage.setItem("vip",true);
            this.$toast("支付成功");
        },2000)
        setTimeout(()=>{
            this.$router.push(this.hop);
         },3000)
    }
  },
  created() {

    this.token = window.localStorage.getItem("token");
    this.hop = this.$route.query.hop;
  },
};
</script>

<style lang="scss" scoped>
.member {
//   height: 100%;
  .wrapper {
    min-width: 320px;
    max-width: 750px;
    margin: 0 auto;
    height: 100%;
    .van-loading{
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translateX(-50%) translateY(100%);
    }
    .header {
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background-color: rgb(236, 178, 51);
      padding: 0 16px;
      position: sticky;
      left: 0;
      top: 0;
      z-index: 1;
      color: #fff;
    }
    .header_left img {
      height: 20px;
      display: block;
    }
    .header_center {
      font-size: 18px;
      font-weight: 500;
    }
    .header_right {
      width: 20px;
    }
    .portrait {
      display: flex;
      align-items: center;
      padding-left: 25px;
      height: 150px;
      background-color: rgb(236, 178, 51);
      .head_portrait {
        width: 15.5%;
        position: relative;
        img {
          width: 100%;
        }
      }
      .user {
        color: #fff;
        padding-left: 20px;
        p {
          height: 25px;
          line-height: 25px;
        }
      }
      .vip2 {
        width: 20px;
        position: absolute;
        bottom: 0px;
        right: 0px;
        img {
          width: 100%;
        }
      }
    }
    .imgs {
      position: relative;
      transform: translateY(-37%);
      display: flex;
      justify-content: center;
      img {
        width: 330px;
        display: block;
      }
    }
    .money {
      ul {
        display: flex;
        justify-content: space-evenly;
        li {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          width: 95px;
          height: 120px;
          border: 1px solid rgb(199, 197, 197);
          border-radius: 5px;
          position: relative;
          p {
            height: 30px;
            line-height: 30px;
            &:nth-child(2) {
              font-weight: bold;
            }
          }
          .hot {
            background: url(../assets/img/iv_tuijian.png) no-repeat;
            width: 38px;
            height: 20px;
            background-size: 38px 20px;
            position: absolute;
            top: 0;
            left: 0px;
          }
        }
        li.con {
          border: 1px solid rgb(244, 201, 108);
        }
      }
    }
    .payment {
      margin-top: 15px;
      .zfb {
        display: flex;
        align-items: center;
        padding-left: 20px;
        img {
          width: 25px;
          height: 25px;
        }
      }
    }
    .open {
      font-weight: bold;
      color: rgb(57, 60, 65);
      background-color: rgb(236, 178, 51);
      width: 330px;
      height: 50px;
      border-radius: 25px;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 10px auto;
    }
    .logo {
      margin-top: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      .logo_center {
        padding: 0 10px;
        font-weight: bold;
        color: rgb(57, 60, 65);
      }
      img {
        width: 110px;
      }
    }
    .privilege {
        margin-top: 25px;
      ul {
          display: flex;
        justify-content: space-evenly;
        li {
          display: flex;
         flex-direction: column;
         align-items: center;
          p{
            margin: 0;
            height: 50px;
            line-height: 50px;
          }
          img {
            width: 60px;
            display: block;
          }
        }
      }
    }
    .van-cell__title {
      font-size: 16px;
    }
  }
}
</style>